<template>
  <div class="scrollBox">
    <SnelArea class="listAll y-list13" style="left: 100px" :config="area2Config">
      <div class="item">
        <div class="pic"><img src="../assets/t/images/demopic/pic-407X490.png" alt="" /></div>
        <div class="txt-wrap wrap02">
          <div class="txt txt01">浙江卫视浙江卫视浙江卫视浙江卫视浙江卫视</div>
          <div class="txt txt02">每晚18:00《江湖绝学》</div>
        </div>
      </div>
    </SnelArea>
    <SnelArea class="listAll y-list12 y-list34" style="left: 537px" :config="area3Config">
      <div class="item">
        <div class="pic"><img src="../assets/t/images/demopic/pic-845X490.png" alt="" /></div>
        <div class="txt-wrap wrap02">
          <div class="txt txt01">2021东京奥运会</div>
          <div class="txt txt02">中国女足拿下最后一张入场券精彩瞬间</div>
        </div>
      </div>
    </SnelArea>
    <SnelArea class="listAll y-list-txt01" :config="area4Config">
      <div class="item">
        <div class="txt txt01">敦刻尔克敦刻尔克敦刻尔克敦刻尔克敦刻尔克</div>
        <div class="txt txt02">当40万人无法回家，家为0万人无法回家</div>
      </div>
      <div class="item" style="top: 173px">
        <div class="txt txt01">敦刻尔克</div>
        <div class="txt txt02">当40万人无法回家，家为0万人无法回家</div>
      </div>
      <div class="item" style="top: 346px">
        <div class="txt txt01">敦刻尔克</div>
        <div class="txt txt02">当40万人无法回家，家为0万人无法回家</div>
      </div>
    </SnelArea>
    <SnelArea class="listAll y-list16" style="top: 575px" :config="area5Config">
      <div class="item">
        <div class="pic"><img src="../assets/t/images/demopic/pic-322X180.png" alt="" /></div>
      </div>
      <div class="item" style="left: 349px">
        <div class="pic"><img src="../assets/t/images/demopic/pic-322X180_02.png" alt="" /></div>
      </div>
      <div class="item" style="left: 689px">
        <div class="pic"><img src="../assets/t/images/demopic/pic-322X180_03.png" alt="" /></div>
      </div>
      <div class="item" style="left: 1047px">
        <div class="pic"><img src="../assets/t/images/demopic/pic-322X180_04.png" alt="" /></div>
      </div>
      <div class="item" style="left: 1396px">
        <div class="pic"><img src="../assets/t/images/demopic/pic-322X180_05.png" alt="" /></div>
      </div>
    </SnelArea>
    <div class="y-title" style="top: 816px">重磅热剧 同步更新</div>
    <SnelArea class="listAll y-list12 y-list32" style="top: 910px">
      <div class="item">
        <div class="pic"><img src="../assets/t/images/demopic/pic-845X295.png" alt="" /></div>
        <div class="txt-wrap wrap02">
          <div class="txt txt01">2021东京奥运会</div>
          <!-- <div class="txt txt02">中国女足拿下最后一张入场券精彩瞬间</div> -->
        </div>
      </div>
      <div class="item" style="left: 875px">
        <div class="pic"><img src="../assets/t/images/demopic/pic-845X295.png" alt="" /></div>
        <div class="txt-wrap wrap02">
          <div class="txt txt01">2021东京奥运会</div>
          <!-- <div class="txt txt02">中国女足拿下最后一张入场券精彩瞬间</div> -->
        </div>
      </div>
      <div class="item" style="top: 325px">
        <div class="pic"><img src="../assets/t/images/demopic/pic-845X295.png" alt="" /></div>
        <div class="txt-wrap wrap02">
          <div class="txt txt01">2021东京奥运会</div>
          <!-- <div class="txt txt02">中国女足拿下最后一张入场券精彩瞬间</div> -->
        </div>
      </div>
      <div class="item" style="left: 875px; top: 325px">
        <div class="pic"><img src="../assets/t/images/demopic/pic-845X295.png" alt="" /></div>
        <div class="txt-wrap wrap02">
          <div class="txt txt01">2021东京奥运会</div>
          <!-- <div class="txt txt02">中国女足拿下最后一张入场券精彩瞬间</div> -->
        </div>
      </div>
    </SnelArea>
    <!-- 回顶部/搜索 -->
    <SnelArea class="y-footerBtn01" style="top: 1590px">
      <div class="item">
        <div class="icon icon01"></div>
        <div class="txt">回顶部</div>
      </div>
      <div class="item" style="left: 189px">
        <div class="icon icon02"></div>
        <div class="txt">搜 索</div>
      </div>
    </SnelArea>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      // /** @type {SnelArea} */
      /** @type {SnelArea} */
      area2Config: {
        outMoveDir: [1, -1, 5, 3],
      },
      /** @type {SnelArea} */
      area3Config: {
        outMoveDir: [1, 2, 5, 4],
      },
      /** @type {SnelArea} */
      area4Config: {
        outMoveDir: [1, 3, 5, -1],
      },
      /** @type {SnelArea} */
      area5Config: {
        outMoveDir: [[2, 3, 4], -1, 6, -1],
      },
    };
  },
  mounted() {
    // console.log('m1');
  },
};
</script>
